<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新疆地区</title>
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="./css/1.css">
    <style>
        body {
          background-image: url('path/to/your/image.jpg');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }
        .p1 .slide{
          width: 100%;
          height: 450px;
        }
        .slide>img{
          width: 100%;
          height: 450px;
        }
      </style>
</head>
<body style="background-image: url('./img/背景1.jpg');">
    <div class="p1">
      <div class="slide">
        <img src="./img/xjlb1.jpg" alt="">
      </div>
    </div>
   <div id="zhu"></div>
   <div id="zhe"></div>
   <div id="bing"></div>



   <script>
     //柱状图工业
 var myChart = echarts.init(document.getElementById('zhu'))
 option = {
  title:{
         text: '新疆规模以上工业利润',
         textStyle: {
             fontSize: 16 // 设置标题字体大小
             }
     },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      data: ['2018', '2019', '2020', '2021', '2022', '2023'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '利润总额（亿元）',
    },
    {
      type: 'value',
      name: '企业单位数',
      axisLabel: {
        formatter: '{value} 个'
      }
    }
  ],
  series: [
    {
      name: '利润总额',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 亿元';
        }
      },
      data: [
        736.92, 737.98, 623.36, 629.09, 787.06, 2462.30]
    },
    {
      name: '企业单位数',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 个';
        }
      },
      data: [2897, 2973, 3122, 3633, 3749, 3790]
    }
  ]
};
myChart.setOption(option);

//折线农业
var myChart = echarts.init(document.getElementById('zhe'))
setTimeout(function () {
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['product', '2019', '2020', '2021', '2022', '2023'],
        ['小麦', 681.84, 621.58, 571.89, 576.03, 582.09],
        ['玉米', 765.64, 772.62, 827.57, 858.37, 928.43],
        ['棉花', 407.80, 456.60, 511.10, 500.20, 516.10],
        ['苹果', 136.73, 144, 147.91, 170.57, 182.01],
        ['葡萄', 287.61, 301.31, 297.37, 305.60, 348.34],
        ['红枣', 95, 97, 101, 98, 104],
        ['核桃', 115.41, 121.37, 125.43, 115.49, 117.43],
      ]
    },
    xAxis: { type: 'category' },
    yAxis: [
    {
      type: 'value',
      name: '产量（万吨）',
    },
    ],
    grid: { top: '55%' },
    series: [
    {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        },
        encode: {
          itemName: 'product',
          value: '2012',
          tooltip: '2012'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

//扇形
var bingChart = echarts.init(document.getElementById('bing'));
var bingOption = {
  title: {
    text: '新疆各地区种植面积(千公顷）',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    left: 'center',
    top: 'bottom',
    data: [
      'rose1',
      'rose2',
      'rose3',
      'rose4',
      'rose5',
      'rose6',
      'rose7',
      'rose8'
    ]
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: '农作物',
      type: 'pie',
      radius: [20, 140],
      center: ['25%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: true
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: [
        { value: 1413.1, name: '生产建设兵团' },
        { value: 1040.73, name: '喀什地区' },
        { value: 937.33, name: '阿克苏地区' },
        { value: 570.48, name: '塔城地区' },
        { value: 515.01, name: '伊犁哈萨克自治州' },
        { value: 480.39, name: '昌吉回族自治州' },
        { value: 391.50, name: '巴音郭楞蒙古自治州' },
        { value: 296.48, name: '阿勒泰地区' },
        { value: 244.55, name: '和田地区' },
        { value: 182.57, name: '博尔塔拉蒙古自治州' },
        { value: 76.13, name: '克孜勒苏柯尔克孜自治州' },
        { value: 60.94, name: '哈密市' },
        { value: 55.44, name: '吐鲁番市' },
        { value: 25.82, name: '乌鲁木齐市' },
        { value: 19.14, name: '克拉玛依市' },
      ]
    },
    {
      name: '水果',
      type: 'pie',
      radius: [20, 140],
      center: ['75%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: [
        { value: 261.22, name: '喀什地区' },
        { value: 190.44, name: '生产建设兵团' },
        { value: 142.53, name: '阿克苏地区' },
        { value: 102.62, name: '巴音郭楞蒙古自治州' },
        { value: 56.61, name: '和田地区' },
        { value: 54.99, name: '伊犁哈萨克自治州' },
        { value: 54.85, name: '吐鲁番市' },
        { value: 16.19, name: '克孜勒苏柯尔克孜自治州' },
        { value: 15.85, name: '哈密市' },
        { value: 5.30, name: '昌吉回族自治州' },
        { value: 2.4, name: '塔城地区' },
        { value: 2.34, name: '博尔塔拉蒙古自治州' },
        { value: 1.68, name: '乌鲁木齐市' },
        { value: 0.764, name: '克拉玛依市' },
      ]
    }
  ]
};
bingChart.setOption(bingOption);
   </script>
   <script>
    //轮播图
    let img = document.querySelector(".slide img");
    let imgArr = ["xjlb1.jpg","xjlb2.jpg","xjlb3.jpG"];
    let count = 0;
    function cutImg(){
    img.src = "./img/"+imgArr[count];
//     for(let i = 0; i < iArr.length;i++){
//         iArr[i].className = "";
//     }
//     iArr[count].className = "active"; 
}

//设置定时切换
let timer = setInterval(function(){
    count++;
    if(count>imgArr.length-1){
        count = 0;
    }
    cutImg();
},2000)
   </script>
</body>
</html>